<template>
  <view class="demand-detail-page">
    <!-- 顶部导航栏 -->
    <view class="page-header">
      <view class="header-inner">
        <view class="back-btn" @click="handleBack">
          <FaIcon name="arrow-left" color="#1f2937" :size="36" />
        </view>
        <text class="header-title">需求详情</text>
        <view class="header-actions">
          <view class="action-btn" @click="handleToggleFavorite">
            <FaIcon :name="isFavorited ? 'heart' : 'heart-o'" :color="isFavorited ? '#ef4444' : '#1f2937'" :size="36" />
          </view>
          <view class="action-btn" @click="handleShare">
            <FaIcon name="share" color="#1f2937" :size="36" />
          </view>
        </view>
      </view>
    </view>

    <scroll-view scroll-y class="content-scroll">
      <!-- 需求基本信息 -->
      <view class="info-section">
        <view class="info-card">
          <view class="card-top">
            <view class="icon-wrap">
              <FaIcon name="leaf" color="#ffffff" :size="56" />
            </view>
            <view class="info-content">
              <view class="tag-row">
                <view class="tag tag-category">{{ demandDetail.category }}</view>
                <view class="tag tag-urgent">紧急需求</view>
              </view>
              <text class="demand-title">{{ demandDetail.title }}</text>
              <text class="demand-desc">{{ demandDetail.description }}</text>
            </view>
          </view>
          
          <view class="stats-grid">
            <view class="stat-item">
              <text class="stat-value">{{ demandDetail.budget }}</text>
              <text class="stat-label">预算</text>
            </view>
            <view class="stat-item stat-divider">
              <text class="stat-value primary">{{ demandDetail.deadline }}</text>
              <text class="stat-label">需求时效</text>
            </view>
            <view class="stat-item">
              <text class="stat-value secondary">{{ demandDetail.views }}</text>
              <text class="stat-label">浏览量</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 需求内容详情 -->
      <view class="content-section">
        <view class="section-card">
          <view class="section-header">
            <FaIcon name="file-text-o" color="#10b981" :size="32" />
            <text class="section-title">需求内容</text>
          </view>
          <view class="content-body">
            <rich-text :nodes="demandDetail.content" class="content-text"></rich-text>
          </view>
        </view>
      </view>

      <!-- 需求地区 -->
      <view class="area-section">
        <view class="section-card">
          <view class="section-header">
            <FaIcon name="map-marker" color="#10b981" :size="32" />
            <text class="section-title">需求地区</text>
          </view>
          <text class="area-text">{{ demandDetail.area }}</text>
        </view>
      </view>

      <!-- 预算范围 -->
      <view class="budget-section">
        <view class="section-card">
          <view class="section-header">
            <FaIcon name="dollar" color="#10b981" :size="32" />
            <text class="section-title">预算范围</text>
          </view>
          
          <view class="budget-box">
            <text class="budget-label">总预算</text>
            <text class="budget-value">{{ demandDetail.budget }}元</text>
          </view>
          
          <view class="budget-tip">
            <FaIcon name="info-circle" color="#6b7280" :size="20" />
            <text class="tip-text">具体价格可面议，根据实际情况协商确定</text>
          </view>
        </view>
      </view>

      <!-- 联系方式 -->
      <view class="contact-section">
        <view class="section-card">
          <view class="section-header">
            <FaIcon name="user-circle" color="#10b981" :size="32" />
            <text class="section-title">联系方式</text>
          </view>
          
          <view class="contact-list">
            <view class="contact-item">
              <view class="contact-icon">
                <FaIcon name="user" color="#6b7280" :size="28" />
              </view>
              <view class="contact-info">
                <text class="info-label">联系人</text>
                <text class="info-value">{{ demandDetail.contact.name }}</text>
              </view>
            </view>
            
            <view class="contact-item">
              <view class="contact-icon">
                <FaIcon name="phone" color="#6b7280" :size="28" />
              </view>
              <view class="contact-info">
                <text class="info-label">联系电话</text>
                <text class="info-value">{{ demandDetail.contact.phone }}</text>
              </view>
            </view>
            
            <view class="contact-item">
              <view class="contact-icon">
                <FaIcon name="clock-o" color="#6b7280" :size="28" />
              </view>
              <view class="contact-info">
                <text class="info-label">发布时间</text>
                <text class="info-value">{{ demandDetail.publishTime }}</text>
              </view>
            </view>
            
            <view class="privacy-tip">
              <view class="tip-icon">
                <FaIcon name="shield" color="#d97706" :size="24" />
              </view>
              <view class="tip-content">
                <text class="tip-title">隐私保护提示</text>
                <text class="tip-desc">为保护双方隐私，联系方式已脱敏处理。点击"联系我"按钮并完成登录后可查看完整信息。</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 相似需求推荐 -->
      <view class="recommend-section">
        <view class="recommend-header">
          <FaIcon name="th-large" color="#10b981" :size="32" />
          <text class="recommend-title">相似需求推荐</text>
        </view>
        
        <view class="recommend-list">
          <view 
            v-for="item in similarDemands" 
            :key="item.id"
            class="recommend-item"
            @click="handleViewSimilar(item)"
          >
            <view :class="['item-bar', `bar-${item.barColor}`]"></view>
            <view class="item-content">
              <text class="item-title">{{ item.title }}</text>
              <text class="item-desc">{{ item.description }}</text>
              <view class="item-footer">
                <text class="item-budget">预算: {{ item.budget }}</text>
                <text class="item-time">{{ item.time }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 底部安全区 -->
      <view class="safe-bottom"></view>
    </scroll-view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="bar-inner">
        <view class="icon-btn" @click="handleGoHome">
          <FaIcon name="home" color="#6b7280" :size="36" />
        </view>
        <view class="icon-btn" @click="handleGoList">
          <FaIcon name="list" color="#6b7280" :size="36" />
        </view>
        <button class="contact-btn" @click="handleContact">
          <FaIcon name="wechat" color="#ffffff" :size="32" style="margin-right: 12rpx;" />
          <text class="btn-text">联系我</text>
        </button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import FaIcon from '@/components/common/FaIcon.vue'

const demandId = ref('')
const isFavorited = ref(false)

// 需求详情数据
const demandDetail = ref({
  id: 1,
  title: '急需100亩有机蔬菜种植地',
  category: '种植合作',
  description: '寻找适合有机蔬菜种植的土地，要求土壤肥沃，灌溉条件良好，交通便利',
  budget: '20万',
  deadline: '3天内',
  views: '328',
  area: '山东省济宁市嘉祥县及周边地区',
  content: `
    <p style="margin-bottom: 16px; color: #6b7280; line-height: 1.6;">因业务扩张需要，现急需寻找适合有机蔬菜种植的农业用地，面积约100亩左右。</p>
    
    <p style="margin-bottom: 12px; font-weight: 500; color: #1f2937;">具体要求：</p>
    <p style="margin-bottom: 8px; color: #6b7280; line-height: 1.6;">• 土地位置：山东省济宁市嘉祥县及周边地区</p>
    <p style="margin-bottom: 8px; color: #6b7280; line-height: 1.6;">• 土地面积：80-120亩</p>
    <p style="margin-bottom: 8px; color: #6b7280; line-height: 1.6;">• 土壤条件：土质肥沃，排水良好，适合有机种植</p>
    <p style="margin-bottom: 8px; color: #6b7280; line-height: 1.6;">• 水源条件：灌溉水源充足，水质良好</p>
    <p style="margin-bottom: 8px; color: #6b7280; line-height: 1.6;">• 交通条件：距离主干道不超过3公里，方便运输</p>
    <p style="margin-bottom: 8px; color: #6b7280; line-height: 1.6;">• 租赁期限：希望能签订5-10年长期租约</p>
    
    <p style="margin-top: 16px; margin-bottom: 12px; font-weight: 500; color: #1f2937;">项目说明：</p>
    <p style="margin-bottom: 16px; color: #6b7280; line-height: 1.6;">我们是一家专注于有机农业的企业，已在行业深耕8年，拥有成熟的有机蔬菜种植技术和完善的销售渠道。</p>
    
    <p style="margin-top: 16px; margin-bottom: 12px; font-weight: 500; color: #1f2937;">合作方式：</p>
    <p style="color: #6b7280; line-height: 1.8;">1. 支付合理的土地租金<br>2. 可提供土地流转协议范本<br>3. 对符合条件的土地优先考虑<br>4. 可实地考察洽谈具体合作事宜</p>
    
    <p style="margin-top: 16px; padding: 16px; background-color: rgba(16, 185, 129, 0.1); border-radius: 12px; color: #10b981; line-height: 1.6;">
      <strong>💡 特别说明：</strong><span style="color: #6b7280;"> 我们诚信经营，欢迎有意向的土地所有者或代理人联系我们。</span>
    </p>
  `,
  contact: {
    name: '李**',
    phone: '139****6789'
  },
  publishTime: '2024年12月11日 09:15'
})

// 相似需求
const similarDemands = ref([
  {
    id: 2,
    title: '寻求农业技术指导服务',
    description: '新建大棚，需要专业技术支持',
    budget: '3000元',
    time: '2天前',
    barColor: 'secondary'
  },
  {
    id: 3,
    title: '急需50亩水稻收割服务',
    description: '水稻即将成熟，需要收割',
    budget: '5000元',
    time: '5天前',
    barColor: 'primary'
  }
])

onLoad((options) => {
  if (options.id) {
    demandId.value = options.id
    // TODO: 根据ID加载需求详情
  }
})

// 事件处理
const handleBack = () => {
  uni.navigateBack()
}

const handleToggleFavorite = () => {
  isFavorited.value = !isFavorited.value
  uni.showToast({
    title: isFavorited.value ? '已收藏' : '已取消收藏',
    icon: 'success'
  })
}

const handleShare = () => {
  uni.showToast({
    title: '分享功能开发中...',
    icon: 'none'
  })
}

const handleGoHome = () => {
  uni.reLaunch({ url: '/pages/yjyny/home/index' })
}

const handleGoList = () => {
  uni.reLaunch({ url: '/pages/yjyny/demand/list' })
}

const handleContact = () => {
  uni.showModal({
    title: '联系方式',
    content: `联系人：${demandDetail.value.contact.name}\n电话：${demandDetail.value.contact.phone}`,
    confirmText: '拨打电话',
    success: (res) => {
      if (res.confirm) {
        uni.makePhoneCall({
          phoneNumber: demandDetail.value.contact.phone.replace(/\*/g, '8')
        })
      }
    }
  })
}

const handleViewSimilar = (item) => {
  uni.redirectTo({
    url: `/pages/yjyny/demand/detail?id=${item.id}`
  })
}
</script>

<style lang="scss" scoped>
.demand-detail-page {
  min-height: 100vh;
  background-color: #f9fafb;
  padding-bottom: 160rpx;
}

// 顶部导航栏
.page-header {
  background-color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 2rpx solid #f3f4f6;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 32rpx;
}

.back-btn {
  width: 64rpx;
  height: 64rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

.back-btn:active {
  background-color: #f3f4f6;
}

.header-title {
  flex: 1;
  font-size: 32rpx;
  font-weight: bold;
  color: #1f2937;
  text-align: center;
  margin: 0 32rpx;
}

.header-actions {
  display: flex;
  gap: 16rpx;
}

.action-btn {
  width: 64rpx;
  height: 64rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

.action-btn:active {
  background-color: #f3f4f6;
}

// 内容滚动区
.content-scroll {
  height: calc(100vh - 120rpx - 160rpx);
}

// 需求基本信息
.info-section {
  padding: 32rpx;
}

.info-card {
  background-color: #ffffff;
  border-radius: 32rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  border: 2rpx solid #f3f4f6;
}

.card-top {
  display: flex;
  align-items: flex-start;
  gap: 24rpx;
  margin-bottom: 24rpx;
}

.icon-wrap {
  width: 112rpx;
  height: 112rpx;
  border-radius: 24rpx;
  background: linear-gradient(135deg, #10b981, #059669);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.info-content {
  flex: 1;
  min-width: 0;
}

.tag-row {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 16rpx;
}

.tag {
  padding: 8rpx 16rpx;
  border-radius: 16rpx;
  font-size: 22rpx;
  font-weight: 500;
  
  &.tag-category {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981;
  }
  
  &.tag-urgent {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
  }
}

.demand-title {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #1f2937;
  line-height: 1.4;
  margin-bottom: 16rpx;
}

.demand-desc {
  display: block;
  font-size: 28rpx;
  color: #6b7280;
  line-height: 1.6;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-top: 24rpx;
  border-top: 2rpx solid #f3f4f6;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  
  &.stat-divider {
    border-left: 2rpx solid #f3f4f6;
    border-right: 2rpx solid #f3f4f6;
  }
}

.stat-value {
  font-size: 40rpx;
  font-weight: bold;
  color: #f59e0b;
  margin-bottom: 8rpx;
  
  &.primary {
    color: #10b981;
  }
  
  &.secondary {
    color: #06b6d4;
  }
}

.stat-label {
  font-size: 22rpx;
  color: #9ca3af;
}

// 通用卡片
.content-section,
.area-section,
.budget-section,
.contact-section {
  padding: 0 32rpx 32rpx;
}

.section-card {
  background-color: #ffffff;
  border-radius: 32rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  border: 2rpx solid #f3f4f6;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 24rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #1f2937;
}

.content-body {
  font-size: 28rpx;
  line-height: 1.6;
}

.content-text {
  word-break: break-all;
}

.area-text {
  display: block;
  font-size: 28rpx;
  color: #6b7280;
  line-height: 1.6;
}

// 预算范围
.budget-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx;
  background-color: rgba(245, 158, 11, 0.1);
  border-radius: 24rpx;
  margin-bottom: 16rpx;
}

.budget-label {
  font-size: 28rpx;
  color: #6b7280;
}

.budget-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #f59e0b;
}

.budget-tip {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.tip-text {
  font-size: 22rpx;
  color: #9ca3af;
  line-height: 1.5;
}

// 联系方式
.contact-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.contact-item {
  display: flex;
  align-items: center;
  padding: 24rpx;
  background-color: #f9fafb;
  border-radius: 24rpx;
}

.contact-icon {
  width: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-info {
  flex: 1;
  margin-left: 24rpx;
  display: flex;
  flex-direction: column;
}

.info-label {
  font-size: 22rpx;
  color: #9ca3af;
  margin-bottom: 8rpx;
}

.info-value {
  font-size: 28rpx;
  font-weight: 500;
  color: #1f2937;
}

.privacy-tip {
  display: flex;
  align-items: flex-start;
  gap: 16rpx;
  padding: 24rpx;
  background-color: rgba(245, 158, 11, 0.1);
  border: 2rpx solid rgba(245, 158, 11, 0.2);
  border-radius: 24rpx;
}

.tip-icon {
  flex-shrink: 0;
  margin-top: 4rpx;
}

.tip-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tip-title {
  font-size: 24rpx;
  font-weight: 500;
  color: #d97706;
  margin-bottom: 8rpx;
}

.tip-desc {
  font-size: 22rpx;
  color: #92400e;
  line-height: 1.5;
}

// 相似需求推荐
.recommend-section {
  padding: 0 32rpx 32rpx;
}

.recommend-header {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 24rpx;
}

.recommend-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #1f2937;
}

.recommend-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.recommend-item {
  position: relative;
  display: flex;
  padding: 24rpx;
  background-color: #ffffff;
  border-radius: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  border: 2rpx solid #f3f4f6;
  transition: all 0.3s;
  overflow: hidden;
}

.recommend-item:active {
  transform: translateY(2rpx);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.item-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 8rpx;
  height: 100%;
  
  &.bar-primary {
    background-color: #10b981;
  }
  
  &.bar-secondary {
    background-color: #06b6d4;
  }
  
  &.bar-accent {
    background-color: #f59e0b;
  }
}

.item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-left: 24rpx;
}

.item-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #1f2937;
  margin-bottom: 8rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-desc {
  font-size: 24rpx;
  color: #9ca3af;
  margin-bottom: 16rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.item-budget {
  font-size: 26rpx;
  font-weight: 500;
  color: #f59e0b;
}

.item-time {
  font-size: 22rpx;
  color: #9ca3af;
}

// 底部安全区
.safe-bottom {
  height: 32rpx;
}

// 底部操作栏
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  border-top: 2rpx solid #f3f4f6;
  padding: 32rpx;
  box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.04);
  z-index: 20;
}

.bar-inner {
  display: flex;
  align-items: center;
  gap: 24rpx;
}

.icon-btn {
  width: 96rpx;
  height: 96rpx;
  border: 2rpx solid #e5e7eb;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

.icon-btn:active {
  background-color: #f3f4f6;
}

.contact-btn {
  flex: 1;
  height: 96rpx;
  background: linear-gradient(135deg, #10b981, #059669);
  border: none;
  border-radius: 24rpx;
  box-shadow: 0 8rpx 24rpx rgba(16, 185, 129, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-text {
  font-size: 32rpx;
  font-weight: 500;
  color: #ffffff;
}
</style>

